
// import { Hmi, View, ViewType, NaviModeType, NotificationModeType, ZoomModeType, HeaderSettings, LinkType } from '../_models/hmi';
// import { ActivatedRoute, Router } from '@angular/router';
import { Component, OnInit, AfterViewInit,Inject } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { ProjectService } from '../_services/project.service';
import { Subscription } from 'rxjs';
import { ViewType} from '../_models/hmi';
import { MatDialog,MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { TranslateService } from '@ngx-translate/core';
import { Utils } from '../_helpers/utils';

@Component({
    selector: 'app-list',
    templateUrl: './list.component.html',
    styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnInit, AfterViewInit {
    // hmi: Hmi = new Hmi();
    projects: any;
    data: any;
    keyVal = '';
    subscriptionLoad: Subscription;
    body: {
        name: string;
        size: number;
        page: number;
        projectId: string;
    };
    total: 0;
    projectList: any[];
    constructor(
        private projectService: ProjectService,
        private router: Router,
        private http: HttpClient,
        public dialog: MatDialog,
		) {}
    ngAfterViewInit(){
        console.log('初始化');
    }

    ngOnInit(){
       this.body = {
            name:undefined,
            size:8,
            page:1,
            projectId:undefined//'1650326970848361288'
       };
       this.getGraphProjectList();

       this.http.post('/deviceApi/project?tenantId=1369559970221985794',{current:1,size:10000}).subscribe((res: any)=>{
        if(res.code===200){
            this.projectList=res.data.records;
        }
       });
    }


    onPageChange(event){
       const {previousPageIndex,pageIndex,pageSize,length} = event;
       this.body.page = pageIndex + 1;
       this.body.size = pageSize;
       this.getGraphProjectList();
    }
    getGraphProjectList(){
        this.http.post<any>('/entityApi/web-scada/chart?tenantId=1369559970221985794',this.body).subscribe(result => {
            const {records,total} = result.data;
            this.data=[];
            records.map(r=>{
                this.data.push({
                    ...r,src:'/assets/images/device.png'
                });
            });
            console.log(this.data);
            this.total = total;
        });
    }
    onChange(val: string){
        console.log('当前选择的值'+ val);
    }
    searchClick(){
        console.log(this.keyVal);
        this.getGraphProjectList();
    }

    deletePoject(item){
        const id = item.id;
        const {data} = item;
        this.http.delete<any>(`/entityApi/web-scada/chart/${id}`).subscribe(result => {
            if(localStorage.getItem('deleteIds')){
                const arr = JSON.parse(localStorage.getItem('deleteIds'));
                arr.push(JSON.parse(data));
                localStorage.setItem('deleteIds',JSON.stringify(arr));
            }else{
               const arr = [JSON.parse(data)];
               localStorage.setItem('deleteIds',JSON.stringify(arr));
            }
            this.getGraphProjectList();
        });
    }

    goEditor(path: string,id?: string,projectId?: string){
        if(id){
            const navigationExtras: NavigationExtras = {
                queryParams: { canvasId: id,projectId:projectId }
            };
            this.router.navigate([path],navigationExtras);
        }else{
            this.router.navigate([path]);
        }

    }

    onNewCanvas(){
        let dialogRef = this.dialog.open(DialogNewCanvasComponent, {
            position: { top: '60px' },
            data: { name: '', type: Utils.getEnumKey(ViewType, ViewType.svg), projectList:this.projectList },
            // disableClose: true
        });

        dialogRef.afterClosed().subscribe(result => {
            if (result && result.name && result.type) {
                // this.addView(result.name, result.type, result);
                const param={
                    description: result.description,
                    name: result.name,
                    projectId: result.projectId,
                    type: result.type
                };
                this.http.post('/entityApi/web-scada/chart/saveBatch?tenantId=1369559970221985794',{list:[param]}).subscribe(res=>{
                    console.log('创建成功',res);
                    this.getGraphProjectList();
                });
            }
        });
    }
}

@Component({
    selector: 'dialog-new-canvas',
    templateUrl: './new-canvas.component.html',
})
export class DialogNewCanvasComponent {

    constructor(public dialogRef: MatDialogRef<DialogNewCanvasComponent>,
        private translateService: TranslateService,
        @Inject(MAT_DIALOG_DATA) public data: any) {
            this.projectList=data.projectList;
        Object.keys(this.docType).forEach(key => {
            this.translateService.get(this.docType[key]).subscribe((txt: string) => { this.docType[key] = txt; });
        });
    }

    docType = ViewType;
    projectList: any[];
    onNoClick(): void {
        this.dialogRef.close();
    }

    isValid(name): boolean {
        if (!this.data.type) { return false; }
        if (!this.data.name) { return false; }
        return true;
        // return (this.data.exist.find((n) => n === name)) ? false : true;
    }
}
